interface StorageUsageProps {
  used: number;
  total: number;
  fileTypes: {
    document: number;
    image: number;
    video: number;
    other: number;
  };
}

export default function StorageUsage({ used, total, fileTypes }: StorageUsageProps) {
  const percentage = (used / total) * 100;
  
  // 确定进度条颜色 based on usage percentage
  const getProgressColor = () => {
    if (percentage < 70) return 'bg-blue-600';
    if (percentage < 90) return 'bg-yellow-500';
    return 'bg-red-500';
  };
  
  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
          存储空间使用情况
        </h3>
        <span className="text-sm font-medium">
          {used.toFixed(1)} GB / {total} GB ({percentage.toFixed(0)}%)
        </span>
      </div>
      
      {/* 进度条容器 */}
      <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3.5 overflow-hidden">
        {/* 进度条 */}
        <div 
          className={`h-full rounded-full transition-all duration-1000 ease-out ${getProgressColor()}`}
          style={{ width: `${percentage}%` }}
        ></div>
      </div>
      
  {/* 存储类别分布 */}
  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
    <div className="flex items-center gap-2">
      <span className="w-3 h-3 rounded-full bg-blue-500"></span>
      <span className="text-sm text-gray-600 dark:text-gray-300">文档 ({fileTypes.document.toFixed(1)} GB)</span>
    </div>
    <div className="flex items-center gap-2">
      <span className="w-3 h-3 rounded-full bg-green-500"></span>
      <span className="text-sm text-gray-600 dark:text-gray-300">图片 ({fileTypes.image.toFixed(1)} GB)</span>
    </div>
    <div className="flex items-center gap-2">
      <span className="w-3 h-3 rounded-full bg-purple-500"></span>
      <span className="text-sm text-gray-600 dark:text-gray-300">视频 ({fileTypes.video.toFixed(1)} GB)</span>
    </div>
    <div className="flex items-center gap-2">
      <span className="w-3 h-3 rounded-full bg-yellow-500"></span>
      <span className="text-sm text-gray-600 dark:text-gray-300">其他 ({fileTypes.other.toFixed(1)} GB)</span>
    </div>
  </div>
    </div>
  );
}